<template>
  <div class="page-container">
    <div class="header">
      <span class="title_pro">产品信息</span>
      <el-button v-if="!readOnly" type="success" @click="addProductDialogVisible = true">添加产品</el-button>
    </div>

    <el-table
:data="props.modelValue" border stripe style="width: 100%; margin-top: 20px;"  :header-cell-style="{ background: '#f5f7fa', color: '#606266', textAlign: 'center' }"
        :cell-style="{ textAlign: 'center' }">
      <el-table-column type="index" label="序号" width="60" align="center" />
      <el-table-column prop="productCategory" label="产品分类" width="100"  fixed/>
      <el-table-column prop="partNumber" label="品号" width="150" fixed/>
      <el-table-column prop="productName" label="品名" width="150" />
      <el-table-column prop="drawingNumber" label="图号" width="120" />
      <el-table-column prop="flowchartNumber" label="流程图号" width="150" />
      <el-table-column prop="specifications" label="规格" min-width="250" show-overflow-tooltip />
      <el-table-column prop="description" label="描述" min-width="250" show-overflow-tooltip />
      <el-table-column label="所需数量" width="180" fixed="right">
        <template #default="scope">
          <!-- 这里使用 el-input-number 来编辑数量 -->
          <el-input-number
            v-model="scope.row.requiredQuantity"
            :min="1"
            controls-position="right"
            style="width: 150px"
            :disabled="readOnly"
          />
        </template>
      </el-table-column>
      <el-table-column prop="unit" label="单位" width="80" align="center" fixed="right"/>
      <el-table-column label="操作" width="100" align="center" v-if="!readOnly" fixed="right">
        <template #default="scope">
          <el-button type="danger" link @click="handleDelete(scope.$index)">
            <el-icon><Delete /></el-icon> 删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <!--
      调用弹框组件：
      1. v-model: 控制弹框的显示和隐藏。
      2. @confirm: 监听弹框发出的 'confirm' 事件，当用户点击确定时触发 handleAddProducts 方法。
    -->
    <AddProductDialog
      v-model="addProductDialogVisible"
      @confirm="handleAddProducts"
    />
  </div>
</template>

<script setup>
import { ref } from 'vue';
import { Delete } from '@element-plus/icons-vue';
// 1. 导入你刚刚创建的弹框组件
import AddProductDialog from './AddProductDialog.vue'; 
const props = defineProps({
  modelValue: {
    type: Array,
    default: () => [],
  },
  readOnly: {  // 新增：只读模式控制属性
    type: Boolean,
    default: false,
  }
});

const emit = defineEmits(['update:modelValue']);


// 控制弹框是否显示
const addProductDialogVisible = ref(false);

/**
 * 处理从弹框返回的产品数据 (优化版)
 * @param {Array} selectedProducts - 弹框组件传回的已选产品数组
 */
const handleAddProducts = (selectedProducts) => {
  // 1. 获取主表格中已存在的所有产品ID
  const existingIds = new Set(props.modelValue.map(item => item.productSpecId));

  // 2. 过滤出那些在主表格中还不存在的新产品
  const newItems = selectedProducts
    .filter(product => {
      if (existingIds.has(product.productSpecId)) {
        // 如果产品已存在，在控制台给个提示，然后过滤掉它
        console.warn(`产品 "${product.productName}" 已存在于BOM列表中，本次添加已跳过。`);
        return false; // 返回 false 表示过滤掉此项
      }
      return true; // 返回 true 表示保留此项
    })
    .map(product => ({
      ...product, // 复制产品所有信息
      requiredQuantity: 1, // 添加一个默认的 "所需数量"
    }));

  // 3. 判断是否有真正的新产品需要添加
  if (newItems.length > 0) {
     emit('update:modelValue', [...props.modelValue, ...newItems]);
    // 给用户一个成功的反馈
    ElMessage.success(`成功添加 ${newItems.length} 个新产品！`);
  } else {
    // 如果选择的所有产品都已存在，也给用户一个提示
    ElMessage.warning('您选择的产品均已存在于列表中，没有新产品被添加。');
  }

  console.log('最终添加到BOM列表的新产品数组:', newItems);
};

/**
 * 删除BOM列表中的一项
 * @param {number} index - 要删除的项在数组中的索引
 */
const handleDelete = (index) => {
  const newBomItems = props.modelValue.filter((_, i) => i !== index);
  emit('update:modelValue', newBomItems);
};
</script>

<style scoped>
.page-container {
  padding: 20px;
  background-color: #fff;
}

.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.title_pro {
  font-size: 18px;
  font-weight: bold;
  
}
</style>